<template>
  <div class="audio_box">
    <div class="player">
      <div class="player_left">
        <div id="box" class="photo" :class="{ paused: !isRotating }">
          <img
            src="https://img.zcool.cn/community/018c025f3fad6aa80120a821dd1380.jpg"
          />
        </div>
        <!-- <div class="text" @click="toAudioPlay">东北民谣(毛不易)</div> -->
        <div class="text" @click="showPopup">东北民谣(毛不易)</div>
        <!-- 音乐播放详情 -->
        <van-popup
          v-model:show="isShow"
          position="bottom"
          closeable
          close-icon-position="top-left"
          :style="{ height: '100%' }"
        >
          <component :is="currentComponent"></component>
        </van-popup>
      </div>
      <div class="player_right">
        <div class="player_button" @click="playMusic">
          <van-icon v-if="!isPlayer" name="play-circle-o" size="35px" />
          <van-icon v-else name="pause-circle-o" size="35px" />
        </div>
        <div class="player_list" @click="showPopup1">
          <van-icon name="bars" size="35px" />
        </div>
        <!-- 音乐列表 -->
        <van-popup
          v-model:show="isShow1"
          position="bottom"
          closeable
          round
          :style="{ height: '30%' }"
        />
      </div>
    </div>
    <div class="audioBox">
      <audio ref="audio" :src="songUrl">
        <!-- 音乐地址本地暂时只有这种方式比较好引入 -->
        <!-- <source src="../../assets/SoundHelix-Song-1.mp3" /> -->
        <!-- <source :src="songUrl" /> -->
      </audio>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import AudioPlay2 from "@/views/AudioPlay/AudioPlay2.vue";
// import songUrl from '@/assets/SoundHelix-Song-1.mp3';
// import router from "@/router";
const channel = new BroadcastChannel("audio_channel");
const currentComponent = AudioPlay2;
// 歌曲列表
const songList = [
  {
    id: 1,
    name: "东北民谣",
    singer: "毛不易",
    url: "https://m801.music.126.net/20241125210104/d6956e0194ecc9405ac3046b3a23193d/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/46000839399/6c11/61d9/95a8/066fe5feddc56419fe55ac9c6503c7ae.mp3",
  },
  {
    id: 2,
    name: "东北民谣",
    singer: "毛不易",
    url: "https://m801.music.126.net/20241125210104/d6956e0194ecc9405ac3046b3a23193d/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/46000839399/6c11/61d9/95a8/066fe5feddc56419fe55ac9c6503c7ae.mp3",
  },
  {
    id: 3,
    name: "东北民谣",
    singer: "毛不易",
    url: "https://m801.music.126.net/20241125210104/d6956e0194ecc9405ac3046b3a23193d/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/46000839399/6c11/61d9/95a8/066fe5feddc56419fe55ac9c6503c7ae.mp3",
  },
];
// 拿到数组中的某一个歌曲的url
let index = 0;
const songUrl = songList[index].url;
// 获取audio元素
let audio = document.querySelector("audio");
// 获取保存的播放时间
let saveTime = sessionStorage.getItem("currentTime");
let isPlayer = ref(false);
let isRotating = ref(false);
// 点击歌名跳转详情页
let isShow = ref(false);
let showPopup = () => {
  isShow.value = !isShow.value;
  //将当前播放状态传给详情页
  channel.postMessage({ isPlayer: isPlayer.value });
};
// 点击歌单弹出歌单列表
let isShow1 = ref(false);
let showPopup1 = () => {
  isShow1.value = !isShow1.value;
};
// 播放事件
function playMusic() {
  isPlayer.value = !isPlayer.value;
  toggleRotation();
  if (isPlayer.value === false) {
    audio.pause();
    console.log("音乐暂停");
    //暂停时保存当前播放时间,下次打开时从保存的时间开始播放
    saveTime = audio.currentTime;
    //将保存的时间保存到sessionStorage中并且赋值给currentTime
    sessionStorage.setItem("currentTime", saveTime);
    console.log(saveTime);
  }
  if (isPlayer.value === true) {
    audio.play();
    console.log("音乐播放");
    //从保存的时间开始播放
    audio.currentTime = saveTime;
    //打印当前播放时间
    console.log(audio.currentTime);
    console.log("当前播放第几首歌曲",index);
  }
}
// 旋转事件
function toggleRotation() {
  console.log("旋转事件");
  // 打开项目后图标会自动旋转，需要将其暂停
  if (isRotating.value) {
    document.getElementById("box").classList.remove("paused");
  } else {
    document.getElementById("box").classList.add("paused");
  }
  isRotating.value = !isRotating.value;
}
onMounted(() => {
  //监听音乐播放状态发生变化时，将播放状态传给详情页
  channel.postMessage({ isPlayer: isPlayer.value });
  //播放完毕将播放状态改为false
  audio.addEventListener("ended", function () {
    isPlayer.value = false;
    toggleRotation();
    // 将音乐播放状态传给详情页
    channel.postMessage({ isPlayer: isPlayer.value });
    //音乐播放完毕将保存的时间设置为0，打印当前时间
    console.log(audio.currentTime);
    saveTime = 0;
    console.log("播放完毕");
  });
  // 监听音乐播放状态
  channel.onmessage = (event) => {
    console.log("音乐收到消息：", event.data);
    // 如果收到的消息是音乐播放状态的话，就更新isPlayer的值
    if(event.data.isPlayer !== undefined && event.data.next === undefined){
    isPlayer.value = event.data.isPlayer;
    toggleRotation();
    if (isPlayer.value === true) {
      audio.play();
      console.log("音乐监听到播放");
      //从保存的时间开始播放
      audio.currentTime = saveTime;
      //打印当前播放时间
      console.log(audio.currentTime);
    } if (isPlayer.value === false){
      audio.pause();
      console.log("音乐监听到暂停");
      //暂停时保存当前播放时间,下次打开时从保存的时间开始播放
      saveTime = audio.currentTime;
      //将保存的时间保存到sessionStorage中并且赋值给currentTime
      sessionStorage.setItem("currentTime", saveTime);
      console.log(saveTime);
    }}
    // 如果收到的消息是切换歌曲的话，就更新歌曲的url
    if(event.data.next !== undefined && event.data.isPlayer !== undefined){
      if (event.data.next === true && event.data.isPlayer === false) {
      index += 1;
      audio.src = songList[index].url;
      console.log("切换歌曲",audio.src);
      //切换歌曲后保存当前播放时间,下次打开时从保存的时间开始播放
      saveTime = 0;
      //将保存的时间保存到sessionStorage中并且赋值给currentTime
      sessionStorage.setItem("currentTime", saveTime);
      console.log(saveTime);
      playMusic();
      }
      if (event.data.next === true && event.data.isPlayer === true) {
        index += 1;
      console.log("切换歌曲",songUrl);
      audio.src = songList[index].url;
      //切换歌曲后保存当前播放时间,下次打开时从保存的时间开始播放
      saveTime = 0;
      //将保存的时间保存到sessionStorage中并且赋值给currentTime
      sessionStorage.setItem("currentTime", saveTime);
      console.log(saveTime);
      audio.play();
      }
      if(event.data.next === false && event.data.isPlayer === false){
        index -= 1;
        audio.src = songList[index].url;
        console.log("切换歌曲",audio.src);
        //切换歌曲后保存当前播放时间,下次打开时从保存的时间开始播放
        saveTime = 0;
        //将保存的时间保存到sessionStorage中并且赋值给currentTime
        sessionStorage.setItem("currentTime", saveTime);
        console.log(saveTime);
      playMusic();
      }
      if(event.data.next === false && event.data.isPlayer === true){
        index -= 1;
      console.log("切换歌曲",songUrl);
      audio.src = songList[index].url;
      //切换歌曲后保存当前播放时间,下次打开时从保存的时间开始播放
      saveTime = 0;
      //将保存的时间保存到sessionStorage中并且赋值给currentTime
      sessionStorage.setItem("currentTime", saveTime);
      console.log(saveTime);
      audio.play();
      }
  }};
});
// 跳转事件
// function toAudioPlay() {
//   router.push("/AudioPlay");
//   //保存当前播放时间
//   sessionStorage.setItem("currentTime", audio.currentTime);
//   //打印当前播放时间
//   console.log(audio.currentTime);
//   //保存当前播放状态
//   sessionStorage.setItem("isPlayer", isPlayer.value);
//   //打印当前播放状态
//   console.log(isPlayer.value);
// }
</script>
<style scoped>
.audio_box {
  z-index: 2;
  border-radius: 25px;
  padding: 0 5px;
  left: 10%;
  position: fixed;
  bottom: 3.3rem;
  background-color: #ebebeb;
  width: 80%;
}
.audio_box .player {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.player_left,
.player_right {
  display: flex;
  align-items: center;
}
.player_left .photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.5s ease;
}
.player_left img {
  width: 100%;
  height: 100%;
}
.player_left .text {
  margin-left: 20px;
}
.player_right .player_button {
  margin-right: 10px;
}
#box {
  animation: rotateAnimation 2s infinite linear;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box.paused {
  animation-play-state: paused;
}
</style>
